import { Button, Form, Space } from '@douyinfe/semi-ui';
import { debounce, identity, isEqual, isNumber, pickBy } from 'lodash';
import { useCallback, useMemo, useState } from 'react';
import { IQueryParams } from '@/widgets/table-pagination';
import { usePageContext } from './integral-context';
import { initialFilter, pointTypes } from './integral-helper';
import { getList } from '@/redux/user/user-api';

const IntegralFilter = () => {
  const { Option } = Form.Select;
  const PageContext = usePageContext();
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState<any[]>([]);
  const PageAction = useMemo(() => {
    return {
      addRecord: PageContext.addRecord,
      queryParams: PageContext.queryParams,
      setQueryParams: PageContext.setQueryParams,
    };
  }, [PageContext]);

  const applyFilter = useCallback(
    (values: any) => {
      const _queryParams: IQueryParams = {
        ...PageAction.queryParams,
        filter: { ...pickBy(values, identity), ...pickBy(values, isNumber) },
      };
      if (!isEqual(_queryParams, PageAction.queryParams)) {
        PageAction.setQueryParams({ ..._queryParams, pageNum: 1 });
      }
    },
    [PageAction.queryParams]
  );

  const handleSearch = (inputValue: string) => {
    setLoading(true);
    if (inputValue) {
      getList({
        codeOrName: inputValue,
        pageNum: 1,
        pageSize: 10,
      }).then((res: any) => {
        setLoading(false);
        setList(
          res.data.content.map((item: any, index: number) => {
            return {
              value: item.id,
              label: `${item.name}-${item.code}`,
            };
          })
        );
      });
    } else {
      setLoading(false);
    }
  };

  return (
    <Form
      labelPosition='left'
      className='gap-2 items-start'
      layout='horizontal'
      initValues={initialFilter}
      onSubmit={(values: any) => {
        let submitValues: any = { ...values };
        if (values?.userId) {
          submitValues.userId = values?.userId?.value;
        }
        applyFilter(submitValues);
      }}
      onReset={() => applyFilter(initialFilter)}
    >
      <Form.Select
        field='userId'
        label='用户'
        placeholder='请输入用户姓名或工号'
        filter
        remote
        onChangeWithObject
        onSearch={debounce(handleSearch, 1000)}
        optionList={list}
        loading={loading}
        emptyContent={null}
        className='w-[200px]'
      ></Form.Select>
      <Form.Input
        label='积分名称'
        field='title'
        trigger='blur'
        placeholder='请输入'
      ></Form.Input>
      <Form.Select
        field='pointTypeEnum'
        label='积分类型'
        placeholder='请选择'
        showClear
        className='w-[200px]'
      >
        {Object.values(pointTypes).map((type: any) => (
          <Option key={type.value} value={type.value}>
            {type.text}
          </Option>
        ))}
      </Form.Select>
      <Button theme='solid' htmlType='submit'>
        搜索
      </Button>
      <Button htmlType='reset'>重置</Button>
    </Form>
  );
};

export default IntegralFilter;
